<template>
	<view class="e-flex bg-white order-store-address">
		<view class="e-flex-1 e-flex e-m-r-66">
			<view class="address-icon img-66 e-flex-xy-center e-m-r-20">
				<app-image :size="['36rpx']" src="order/car.png" />
			</view>
			<view class="e-flex-1">
				<template v-if="info.deliverAddress">
					<view class="e-ont-30 c-35">
						{{ info.deliverAddress }}
					</view>
					<view class="c-primary e-m-t-10" v-if="info.deliverPhone" @tap="handleCall">
						{{ info.deliverPhone }}
					</view>
				</template>
			</view>
		</view>
		<image src="/static/nearby/navigation1.png" class="img-28" @tap="jump" v-if="info.receivingType !== 2"></image>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	name: 'order-store-address',
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
});
</script>

<script setup lang="ts">
import type { OrderItem } from '@/common/request/api';
import { useNavigation } from '@/common/hooks';

const props = withDefaults(
	defineProps<{
		info: OrderItem;
	}>(),
	{}
);

const { openNavigation } = useNavigation();

const handleCall = () => {
	uni.makePhoneCall({
		phoneNumber: props.info.deliverPhone
	});
};
const jump = () => {
	openNavigation({
		location: props.info.location.split(',') || [],
		title: props.info.storeName
	});
};
</script>

<style scoped lang="scss">
.address-icon {
	border-radius: 50%;
	background: var(--gradient-primary);
}
.order-store-address {
	padding: 36rpx 28rpx 30rpx 30rpx;
}
</style>
